// @desc 主页
// @author xzm
// @date 2021/6/3

<template>
  <div class="container">
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item>
          <img v-lazy="require('@/assets/images/banner.svg')" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-grid :column-num="2" :gutter="12" center>
      <van-grid-item v-for="(item, index) in contentList" :key="index" @click="handleGrid(item)">
        <div slot="icon" class="img_slot">
          <img width="48px" height="48px" :src="item.url" />
        </div>
        <div slot="text" class="text_slot">
          <h3>{{item.title}}</h3>
          <p>{{item.desc}}</p>
        </div>
      </van-grid-item>
    </van-grid>

    <van-popup v-model="showDialog" round style="border-radius:8px;">
      <div class="popCont">
        <div class="firstTitle">温馨提醒</div>
        <div class="firstMessage">&#12288; &#12288;本程序是深圳市交通运输局福田管理局开发的公益查询平台，仅供车主本人查询爱车维修记录（汽车电子健康档案）、厂家竣工出厂合格证等信息。
          <br><br>&#12288; &#12288;若未能查到您爱车维修保养记录，请您提醒维修门店尽快依法上传，合法保护爱车权益。</div>
        <div class="firstBtn" @click="clearKnow">我知道了</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Button, Tabbar, TabbarItem, Swipe, SwipeItem, Grid, GridItem, Dialog, Popup } from 'vant'
import { mapActions, mapMutations, mapState } from 'vuex'
// import FooterTabbar from 'components/FooterTabbar'

export default {
  name: 'home',
  data () {
    return {
      showDialog: true,
      contentList: [
        {
          url: require('@/assets/images/carFeiwu.svg'),
          address: '/article',
          title: '车辆废物关注',
          desc: '核对爱车维修期间产生危废物及其处置情况危废处理，有迹可循'
        },
        {
          url: require('@/assets/images/carHistory.svg'),
          address: '/article',
          title: '维修历史记录',
          desc: '便捷维修历史记录查询，维修透明，维权有据'
        },
        {
          url: require('@/assets/images/carQiye.svg'),
          address: '/article',
          title: '企业名片',
          desc: '维修服务星级厂家，维修爱车更安全，服务更到位'
        },
        {
          url: require('@/assets/images/carCool.svg'),
          address: '/article',
          title: '车库',
          desc: '关注家庭成员间车辆健康状况、车辆状况早知道'
        }
      ],
      iconList: [ 'dashboard', 'example', 'eye-open', 'eye', 'form', 'link', 'nested', 'password', 'table', 'tree', 'user', '404' ]
    }
  },
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Dialog.Component.name]: Dialog.Component,
    [Popup.name]: Popup
    // FooterTabbar
  },
  computed: {
    ...mapState({
      loading: state => state['@@loading'].effects['test/onePlusAsync']
    })
  },
  methods: {
    handleGrid (data) {
      if (data.title === '企业名片') {
        this.$router.push(data.address)
      } else if (data.title === '车辆废物关注') {
        this.$router.push('/rubbishList')
        // Dialog.confirm({
        //   title: '您还未绑定行驶证',
        //   message: '为保障用户隐私，当前查询需要绑定当前车辆行驶证件',
        //   theme: 'round',
        //   confirmButtonText: '去绑定',
        //   confirmButtonColor: '#285FBD',
        //   cancelButtonColor: '#285FBD',
        //   cancelButtonText: '取消'
        // }).then(() => {
        //   console.log('on confirm')
        // }).catch(() => {
        //   console.log('on cancel')
        // })
      } else if (data.title === '维修历史记录') {
        // Dialog.alert({
        //   message: '您上传的行驶证未审核或审核不通过，待审核通过后再进行查询',
        //   theme: 'round',
        //   confirmButtonText: '我知道了',
        //   confirmButtonColor: '#285FBD'
        // }).then(() => {
        //   console.log('on confirm')
        // })
      } else if (data.title === '车库') {
        // Dialog.confirm({
        //   title: '您还未添加车辆',
        //   message: '当前操作需要车辆的相关信息，请添加车辆',
        //   theme: 'round',
        //   confirmButtonText: '去添加',
        //   confirmButtonColor: '#285FBD',
        //   cancelButtonColor: '#285FBD',
        //   cancelButtonText: '取消'
        // }).then(() => {
        //   console.log('on confirm')
        // }).catch(() => {
        //   console.log('on cancel')
        // })
      }
    },
    clearKnow () {
      this.showDialog = !this.showDialog
    }
  }
}
</script>
<style lang="scss">
.container{
  height: auto;
  width: 100%;
}
.van-dialog{
  border-radius: 8px;
}
.popCont{
  width: 300px;
  height: 314px;
  margin: 0 auto;
  .firstTitle{
    text-align: left;
    margin: 24px 0 16px 22px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333333;
  }
  .firstMessage{
    margin: 0 24px 24px 24px;
    text-align: left;
    font-family: PingFangSC-Regular;
    font-size: 15px;
    color: #666666;
  }
  .firstBtn{
    width: 268px;
    height: 49px;
    margin: 16px;
    background: #285FBD;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 49px;
    border-radius: 4px;
  }
}
.van-dialog__content{
  font-size: 15px;
  color: #666666;
}
.van-grid{
  margin-top:12px;
}
.van-grid-item{
  height:169.5px;
}
.van-grid-item__content {
  display: block;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20), 0 3px 6.5px 0 rgba(40,95,189,0.12);
  border-radius: 8px !important;
}
.banner {
  width: 100%;
  height: auto;
  img {
    width: 100%;
    height: auto;
  }
}

.img_slot{
  width:100%;
  text-align:center;
}
.text_slot{
  text-align: center;
  h3{
    font-size:15px;
    font-family: PingFangSC-Semibold;
    color: #333333;
  }
  p{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    letter-spacing: 0;
    text-align: center;
    margin-top: -10px;
  }
}
</style>
